<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link rel="shortcut icon" href="./favicon.png">
    <link rel="stylesheet" type="text/css" href="pageStyle.css">

    <style>
        .front {
            position: relative;
            margin: 13% auto;
        }

        .content th {
            text-align: right;
            font-weight: normal;
            padding: 5px 2px 5px 2px;
        }

        .content td {
            text-align: center;
        }

        h4 {
            display: inline;
        }
        span {
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="back">
    <div class="front">
        <table class="content">
            <tr>
                <td colspan="2"><h4>用户注册</h4></td>
            </tr>
            <tr>
                <th>账号：</th>
                <td>
                    <label for="id">
                        <input type="number" name="id" id="id" required maxlength="13">
                    </label>
                </td>
            </tr>
            <tr>
                <th>密码：</th>
                <td>
                    <label for="password">
                        <input type="password" name="password" id="password" required maxlength="15">
                    </label>
                </td>
            </tr>
            <tr>
                <th>确认密码：</th>
                <td>
                    <label for="password_check">
                        <input type="password" name="password_check" id="password_check" required maxlength="15">
                    </label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label><input name="userType" type="radio" value="false" checked/>普通用户</label>
                    <label><input name="userType" type="radio" value="true"/>管理员</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" name="btn_register" id="btn_register" value="注册">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span>已有账号？&nbsp;<a href="./login.jsp">登录</a></span>
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    let id = document.getElementById("id");
    id.onkeydown = function (e) {
        if (e.key === "e" || e.key === "E" || e.key === ".")
            return false;
    }

    let pwd = document.getElementById("password");
    pwd.onkeydown = function (e) {
        if (e.key === " ")
            return false;
    }

    let pwd_check = document.getElementById("password_check");
    pwd_check.onkeydown = function (e) {
        if (e.key === " ")
            return false;
    }

    let btn_register = document.getElementById("btn_register");
    btn_register.addEventListener("click", function () {
        let id_str = id.value;
        let pwd_str = pwd.value;
        let pwd_check_str = pwd_check.value;

        let radio_group = document.getElementsByName("userType");
        let userType_str = "false";
        for (let i = 0; i < radio_group.length; i++)
            if (radio_group[i].checked)
                userType_str = radio_group[i].value;

        if (id_str.trim().length > 0 && pwd_str === pwd_check_str) {
            //创建异步对象
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "register.do", false);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

            xhr.onreadystatechange = function () {
                //这步为判断服务器是否正确响应
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if(xhr.responseText !== "true")
                        alert("注册失败！");
                    else
                        window.location.href="./login.jsp";
                }
                else
                    alert("连接断开！");
            }

            //发送请求
            xhr.send("id=" + id_str + "&password=" + pwd_str + "&userType=" + userType_str);

        } else
            alert("账号为空或密码不一致!");
    });
</script>
</body>
</html>
